<template>
  <div class="slot-wrapper">
    <div id="tip"
      v-if="value > 0"
      >
      {{ evaluation }}
      </div>
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    value: Number,
    max: {
      type:Number,
      default:Infinity,
    },
  },
  computed: {
    evaluation() {
      if (this.value > this.max) {
        return `${this.max}+ `;
      }
        return this.value;
    }
  },
};
</script>

<style lang="less" scoped>
.slot-wrapper {
  display: inline-block;
  position: relative;
}
#tip {
  padding: 4px 8px;
  color: white;
  background: red;
  font-size: 14px;
  line-height: 1;
  border-radius: calc(0.5em + 5px);
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  border: 1px solid white;
  box-sizing: border-box;
}
</style>
